<template>
  <div>
    <el-row>
      <el-col>
        <!-- 新增轮播图按钮 -->
        <el-button
          type="primary"
          class="addCate"
          @click="addCateFormVisible = true"
          >新增分类</el-button
        >
      </el-col>
    </el-row>
    <vxe-table
      show-overflow
      highlight-hover-row
      row-key
      :border="false"
      :show-header="true"
      :data="tableData"
      :header-cell-style="headClass"
      :cell-style="cellClass"
      :tree-config="{
        children: 'children',
        accordion: false,
        line: false
      }"
    >
      <vxe-table-column
        field="name"
        title="分类名称"
        tree-node
      ></vxe-table-column>
      <vxe-table-column
        field="type"
        title="分类编号"
        width="180px"
      ></vxe-table-column>
      <vxe-table-column
        field="size"
        title="状态"
        width="180px"
      ></vxe-table-column>
      <vxe-table-column field="date" title="创建时间"></vxe-table-column>
      <vxe-table-column title="操作">
        <template>
          <el-button type="primary" size="mini">新建下级</el-button>
          <el-button type="primary" size="mini">编辑</el-button>
          <el-button type="primary" size="mini">停用</el-button>
          <el-button type="primary" size="mini">删除</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <pagination></pagination>

    <!-- 新增轮播图弹出表单 -->
    <el-dialog
      title="新增分类"
      :visible.sync="addCateFormVisible"
      width="457px"
      @close="addCateFormClosed"
    >
      <el-form
        :model="addCateForm"
        label-position="left"
        label-width="80px"
        ref="addCateFormRefs"
      >
        <el-form-item
          label="一级分类"
          :rules="{
            required: true,
            message: '域名不能为空',
            trigger: 'blur'
          }"
          :prop="addCateForm.firstCate"
        >
          <el-input
            v-model="addCateForm.firstCate"
            placeholder="请输入名称"
          ></el-input
          ><i class="el-icon-plus" @click="addCate(cate)"></i>
        </el-form-item>
        <el-form-item
          v-for="(cate, index) in addCateForm.cates"
          :label="`${cnNum[index]}级分类`"
          :key="cate.key"
          :prop="'cates.' + index + '.value'"
        >
          <el-input v-model="cate.value" placeholder="请输入名称"></el-input
          ><i class="el-icon-plus" @click="addCate(cate)"></i
          ><i class="el-icon-minus" @click="removeCate(cate)"></i>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="addCateFormVisible = false"
          class="confirm"
          >确 定</el-button
        >
        <el-button @click="addCateFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pagination from '../../components/pagination'
export default {
  name: 'category',
  components: { pagination },
  props: {},
  data() {
    return {
      tableData: [
        {
          id: 1000,
          name: 'vxe-table 从入门到放弃1',
          type: 'mp3',
          size: 1024,
          date: '2020-08-01'
        },
        {
          id: 1005,
          name: 'Test2',
          type: 'mp4',
          size: null,
          date: '2021-04-01',
          children: [
            {
              id: 24300,
              name: 'Test3',
              type: 'avi',
              size: 1024,
              date: '2020-03-01'
            },
            {
              id: 20045,
              name: 'vxe-table 从入门到放弃4',
              type: 'html',
              size: 600,
              date: '2021-04-01'
            },
            {
              id: 10053,
              name: 'vxe-table 从入门到放弃96',
              type: 'avi',
              size: null,
              date: '2021-04-01',
              children: [
                {
                  id: 24330,
                  name: 'vxe-table 从入门到放弃5',
                  type: 'txt',
                  size: 25,
                  date: '2021-10-01'
                },
                {
                  id: 21011,
                  name: 'Test6',
                  type: 'pdf',
                  size: 512,
                  date: '2020-01-01'
                },
                {
                  id: 22200,
                  name: 'Test7',
                  type: 'js',
                  size: 1024,
                  date: '2021-06-01'
                }
              ]
            }
          ]
        },
        {
          id: 23666,
          name: 'Test8',
          type: 'xlsx',
          size: 2048,
          date: '2020-11-01'
        },
        {
          id: 24555,
          name: 'vxe-table 从入门到放弃9',
          type: 'avi',
          size: 224,
          date: '2020-10-01'
        }
      ],
      addCateFormVisible: false,
      addCateForm: {
        firstCate: '',
        cates: [{ value: '', index: 0 }]
      },
      cnNum: ['二', '三', '四']
    }
  },
  computed: {
    cateLength() {
      if (this.addCateForm.cates.length > 1) {
        return true
      }
      return false
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    headClass() {
      return 'background: linear-gradient(0deg, #DFE1E6, #FAFBFF);text-align:center'
    },
    cellClass() {
      // return 'padding-left:70px; box-sizing: border-box !important;'
    },
    addCate(cate) {
      if (this.addCateForm.cates.length === 3) {
        this.$message.warning('最多只有四级分类')
        return false
      }
      this.addCateForm.cates.push({
        value: '',
        key: Date.now(),
        index: this.addCateForm.cates.length
      })
    },
    removeCate(cate) {
      if (cate.index === this.addCateForm.cates.length - 1) {
        this.addCateForm.cates.splice(cate.index, 1)
      }
      this.addCateForm.cates.splice(
        cate.index + 1,
        this.addCateForm.cates.length - 1
      )
    },
    addCateFormClosed() {
      this.addCateForm.firstCate = ''
      this.$refs.addCateFormRefs.resetFields()
      this.addCateForm.cates = [{ value: '', index: 0 }]
    }
  }
}
</script>
<style lang="less" scoped>
.addCate {
  width: 160px;
  height: 30px;
  background: #663ee7;
  border-radius: 3px;
  line-height: 0px;
  margin-bottom: 20px;
}
/deep/ .vxe-table {
  width: 1630px;
  .vxe-tree--line {
    border-style: solid;
  }
  .vxe-tree-cell {
    // padding-left: 70px !important;
  }
  .c--tooltip {
    text-align: center;
  }

  .col--tree-node {
    // padding-left: 190px !important;
    // text-align: left;
    padding-left: 70px !important;
    .c--tooltip {
      text-align: left !important;
    }
  }
}
.el-form {
  .el-form-item {
    .el-form-item__content {
      .el-input {
        width: 85%;
      }

      i.el-icon-plus,
      i.el-icon-minus {
        font-size: 16px;
        color: #6666ff;
      }
      i.el-icon-plus {
        padding: 0 5px;
      }
    }
  }
}
</style>
